<template>
	<view class="panel-message">
		<scroll-view scroll-y class="message-box" :data="intoView" :scroll-into-view="intoView">
			<view class="content">
				<view class="item" :id="`message_${item.messageIndex}`" v-for="(item,index) in messages" :key="item.messageIndex">
					<rich-text :nodes="item.content"></rich-text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"panel-message",
		data() {
			return {
				messages : [],
				intoView : null,
				messageIndex : 0,
				input_text : ''
			};
		},
		mounted() {
			uni.$on('message',(e) => {
				this.add_message(e);
			})
		},
		methods : {
			add_message(e){
				
				if (getApp().globalData.appVisibleState == 'onShow'){
					this.messageIndex++;
					
					if(this.messages.length >= 8){
						this.messages.shift()
					}
					
					this.messages.push({
						content : e.content,
						messageIndex : this.messageIndex - 1
					});
					
					this.$nextTick(() => {
						
						this.intoView = `message_${this.messageIndex - 1}`;
						
					})
				}
				
				
			},
		}
	}
</script>

<style lang="scss">
	.panel-message{
		
		background-color: $game-color-2;
		border-bottom: 1px solid #000;
		transform: translate3d(0,0,0);
		-webkit-overflow-scrolling : touch;
		.message-box{
			height:104px;
			.content{
				display: flex;
				flex-direction: column;
				padding:10px;
				gap:5px;
				.item{
				}
			}
			
		}
	}
</style>